<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI selectable documentation</title>

<style>
body {
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif"
}

.gutter {
	display: none;
}
</style>
</head>
<body>

	<script>{
		"title":
			"Selectable Widget",
		"excerpt":
			"Use the mouse to select elements, individually or in a group.",
		"termSlugs": {
			"category": [
				"interactions"
			]
		}
	}</script>
	<article id="selectable1" class="entry widget">
		<h2 class="section-title">
			<span>Selectable Widget</span><span class="version-details">version
				added: 1.0</span>
		</h2>
		<div class="entry-wrapper">
			<p class="desc">
				<strong>Description: </strong>Use the mouse to select elements,
				individually or in a group.
			</p>
			<section id="quick-nav">
				<header>
					<h2>
						QuickNav<a href="#entry-examples">Examples</a>
					</h2>
				</header>
				<div class="quick-nav-section">
					<h3>Options</h3>
					<div>
						<a href="#option-appendTo">appendTo</a>
					</div>
					<div>
						<a href="#option-autoRefresh">autoRefresh</a>
					</div>
					<div>
						<a href="#option-cancel">cancel</a>
					</div>
					<div>
						<a href="#option-delay">delay</a>
					</div>
					<div>
						<a href="#option-disabled">disabled</a>
					</div>
					<div>
						<a href="#option-distance">distance</a>
					</div>
					<div>
						<a href="#option-filter">filter</a>
					</div>
					<div>
						<a href="#option-tolerance">tolerance</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Methods</h3>
					<div>
						<a href="#method-destroy">destroy</a>
					</div>
					<div>
						<a href="#method-disable">disable</a>
					</div>
					<div>
						<a href="#method-enable">enable</a>
					</div>
					<div>
						<a href="#method-refresh">refresh</a>
					</div>
					<div>
						<a href="#method-option">option</a>
					</div>
					<div>
						<a href="#method-widget">widget</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Events</h3>
					<div>
						<a href="#event-create">create</a>
					</div>
					<div>
						<a href="#event-selected">selected</a>
					</div>
					<div>
						<a href="#event-selecting">selecting</a>
					</div>
					<div>
						<a href="#event-start">start</a>
					</div>
					<div>
						<a href="#event-stop">stop</a>
					</div>
					<div>
						<a href="#event-unselected">unselected</a>
					</div>
					<div>
						<a href="#event-unselecting">unselecting</a>
					</div>
				</div>
			</section>
			<div class="longdesc" id="entry-longdesc">
				<p>The jQuery UI Selectable plugin allows for elements to be
					selected by dragging a box (sometimes called a lasso) with the
					mouse over the elements. Elements can also be selected via click or
					drag while holding the ctrl/meta key, allowing for multiple
					(non-contiguous) selections.</p>

				<h3>Dependencies</h3>
				<ul>
					<li><a href="/category/ui-core/">UI Core</a></li>
					<li><a href="/jQuery.widget/">Widget Factory</a></li>
					<li><a href="/mouse/">Mouse Interaction</a></li>
				</ul>
			</div>
			<h3>Additional Notes:</h3>
			<div class="longdesc">
				<ul>
					<li>This widget requires some functional CSS, otherwise it
						won't work. If you build a custom theme, use the widget's specific
						CSS file as a starting point.</li>
				</ul>
			</div>
			<section id="options">
				<header>
					<h2 class="underline">Options</h2>
				</header>
				<div id="option-appendTo" class="api-item first-item">
					<h3>
						appendTo<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Selector">Selector</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"body"</code>
					</div>
					<div>Which element the selection helper (the lasso) should be
						appended to.</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the appendTo option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ appendTo: <span
															class="string">"#someElem"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the appendTo option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> appendTo = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"appendTo"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"appendTo"</span>, <span
															class="string">"#someElem"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-autoRefresh" class="api-item">
					<h3>
						autoRefresh<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>true</code>
					</div>
					<div>
						This determines whether to refresh (recalculate) the position and
						size of each selectee at the beginning of each select operation.
						If you have many items, you may want to set this to false and call
						the <a href="#method-refresh"><code>refresh()</code></a> method
						manually.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the autoRefresh option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ autoRefresh: <span
															class="literal">false</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the autoRefresh option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> autoRefresh = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"autoRefresh"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"autoRefresh"</span>, <span
															class="literal">false</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-cancel" class="api-item">
					<h3>
						cancel<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Selector">Selector</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"input,textarea,button,select,option"</code>
					</div>
					<div>Prevents selecting if you start on elements matching the
						selector.</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the cancel option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ cancel: a,.cancel });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the cancel option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> cancel = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"cancel"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"cancel"</span>, a,.cancel );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-delay" class="api-item">
					<h3>
						delay<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Integer">Integer</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>0</code>
					</div>
					<div>Time in milliseconds to define when the selecting should
						start. This helps prevent unwanted selections when clicking on an
						element.</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the delay option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ delay: <span
															class="number">150</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the delay option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> delay = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"delay"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"delay"</span>, <span
															class="number">150</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-disabled" class="api-item">
					<h3>
						disabled<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Disables the selectable if set to
						<code>true</code>
						.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the disabled option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ disabled: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the disabled option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> disabled = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"disabled"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"disabled"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-distance" class="api-item">
					<h3>
						distance<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>0</code>
					</div>
					<div>Tolerance, in pixels, for when selecting should start.
						If specified, selecting will not start until the mouse has been
						dragged beyond the specified distance.</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the distance option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ distance: <span
															class="number">30</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the distance option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> distance = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"distance"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"distance"</span>, <span
															class="number">30</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-filter" class="api-item">
					<h3>
						filter<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Selector">Selector</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"*"</code>
					</div>
					<div>The matching child elements will be made selectees (able
						to be selected).</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the filter option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ filter: li });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the filter option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> filter = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"filter"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"filter"</span>, li );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-tolerance" class="api-item">
					<h3>
						tolerance<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"touch"</code>
					</div>
					<div>
						Specifies which mode to use for testing whether the lasso should
						select an item. Possible values:
						<ul>
							<li><code>"fit"</code>: Lasso overlaps the item entirely.</li>
							<li><code>"touch"</code>: Lasso overlaps the item by any
								amount.</li>
						</ul>
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the selectable with the tolerance option
						specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable({ tolerance: <span
															class="string">"fit"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the tolerance option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> tolerance = $( <span
															class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"tolerance"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).selectable( <span
															class="string">"option"</span>, <span class="string">"tolerance"</span>, <span
															class="string">"fit"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
			</section>
			<section id="methods">
				<header>
					<h2 class="underline">Methods</h2>
				</header>
				<div id="method-destroy">
					<div class="api-item first-item">
						<h3>destroy()</h3>
						<div>Removes the selectable functionality completely. This
							will return the element back to its pre-init state.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the destroy method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).selectable( <span
																	class="string">"destroy"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-disable">
					<div class="api-item">
						<h3>disable()</h3>
						<div>Disables the selectable.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the disable method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).selectable( <span
																	class="string">"disable"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-enable">
					<div class="api-item">
						<h3>enable()</h3>
						<div>Enables the selectable.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the enable method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).selectable( <span
																	class="string">"enable"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-option">
					<div class="api-item">
						<h3>
							option( optionName )<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Object">Object</a></span>
						</h3>
						<div>
							Gets the value currently associated with the specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to get.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> isDisabled = $( <span
																	class="string">".selector"</span> ).selectable( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>
							option()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
						</h3>
						<div>Gets an object containing key/value pairs representing
							the current selectable options hash.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> options = $( <span
																	class="string">".selector"</span> ).selectable( <span
																	class="string">"option"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( optionName, value )</h3>
						<div>
							Sets the value of the selectable option associated with the
							specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to set.</div>
							</li>
							<li>
								<div>
									<strong>value</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A value to set for the option.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).selectable( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span>, <span
																	class="literal">true</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( options )</h3>
						<div>Sets one or more options for the selectable.</div>
						<ul>
							<li>
								<div>
									<strong>options</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A map of option-value pairs to set.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).selectable( <span
																	class="string">"option"</span>, { disabled: <span
																	class="literal">true</span> } );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-refresh">
					<div class="api-item">
						<h3>refresh()</h3>
						<div>
							Refresh the position and size of each selectee element. This
							method can be used to manually recalculate the position and size
							of each selectee when the <a href="#option-autoRefresh"><code>autoRefresh</code></a>
							option is set to
							<code>false</code>
							.
						</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the refresh method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).selectable( <span
																	class="string">"refresh"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-widget">
					<div class="api-item">
						<h3>
							widget()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
						</h3>
						<div>
							Returns a
							<code>jQuery</code>
							object containing the selectable element.
						</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the widget method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> widget = $( <span
																	class="string">".selector"</span> ).selectable( <span
																	class="string">"widget"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
			</section>
			<section id="events">
				<header>
					<h2 class="underline">Events</h2>
				</header>
				<div id="event-create" class="api-item first-item">
					<h3>
						create( event, ui )<span class="returns">Type: <code>selectablecreate</code></span>
					</h3>
					<div>Triggered when the selectable is created.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the selectable with the create callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).selectable({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  create: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the selectablecreate event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"selectablecreate"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-selected" class="api-item">
					<h3>
						selected( event, ui )<span class="returns">Type: <code>selectableselected</code></span>
					</h3>
					<div>Triggered at the end of the select operation, on each
						element added to the selection.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>selected</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Element">Element</a>
									</div>
									<div>The selectable item that has been selected.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the selectable with the selected callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).selectable({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  selected: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the selectableselected event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"selectableselected"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-selecting" class="api-item">
					<h3>
						selecting( event, ui )<span class="returns">Type: <code>selectableselecting</code></span>
					</h3>
					<div>Triggered during the select operation, on each element
						added to the selection.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>selecting</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Element">Element</a>
									</div>
									<div>The current selectable item being selected.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the selectable with the selecting callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).selectable({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  selecting: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the selectableselecting event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"selectableselecting"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-start" class="api-item">
					<h3>
						start( event, ui )<span class="returns">Type: <code>selectablestart</code></span>
					</h3>
					<div>Triggered at the beginning of the select operation.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the selectable with the start callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).selectable({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  start: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the selectablestart event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"selectablestart"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-stop" class="api-item">
					<h3>
						stop( event, ui )<span class="returns">Type: <code>selectablestop</code></span>
					</h3>
					<div>Triggered at the end of the select operation.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the selectable with the stop callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).selectable({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  stop: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the selectablestop event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"selectablestop"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-unselected" class="api-item">
					<h3>
						unselected( event, ui )<span class="returns">Type: <code>selectableunselected</code></span>
					</h3>
					<div>Triggered at the end of the select operation, on each
						element removed from the selection.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>unselected</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Element">Element</a>
									</div>
									<div>The selectable item that has been unselected.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the selectable with the unselected callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).selectable({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  unselected: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the selectableunselected event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"selectableunselected"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-unselecting" class="api-item">
					<h3>
						unselecting( event, ui )<span class="returns">Type: <code>selectableunselecting</code></span>
					</h3>
					<div>Triggered during the select operation, on each element
						removed from the selection.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>unselecting</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Element">Element</a>
									</div>
									<div>The current selectable item being unselected.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the selectable with the unselecting callback
							specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).selectable({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  unselecting: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the selectableunselecting event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"selectableunselecting"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</section>
			<section class="entry-examples" id="entry-examples">
				<header>
					<h2 class="underline">Example:</h2>
				</header>
				<div class="entry-example" id="example-0">
					<h4>
						<span class="desc">A simple jQuery UI Selectable.</span>
					</h4>
					<div class="syntaxhighlighter xml ">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

										<div class="line n6">6</div>

										<div class="line n7">7</div>

										<div class="line n8">8</div>

										<div class="line n9">9</div>

										<div class="line n10">10</div>

										<div class="line n11">11</div>

										<div class="line n12">12</div>

										<div class="line n13">13</div>

										<div class="line n14">14</div>

										<div class="line n15">15</div>

										<div class="line n16">16</div>

										<div class="line n17">17</div>

										<div class="line n18">18</div>

										<div class="line n19">19</div>

										<div class="line n20">20</div>

										<div class="line n21">21</div>

										<div class="line n22">22</div>

										<div class="line n23">23</div>

										<div class="line n24">24</div>

										<div class="line n25">25</div>

										<div class="line n26">26</div>

										<div class="line n27">27</div>

										<div class="line n28">28</div>

										<div class="line n29">29</div>

										<div class="line n30">30</div>

										<div class="line n31">31</div>

										<div class="line n32">32</div>

										<div class="line n33">33</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="doctype">&lt;!doctype html&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">html</span> <span
															class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">meta</span> <span class="attribute">charset</span>=<span
															class="value">"utf-8"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">title</span>&gt;</span>selectable demo<span
															class="tag">&lt;/<span class="title">title</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">link</span> <span class="attribute">rel</span>=<span
															class="value">"stylesheet"</span> <span class="attribute">href</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">style</span>&gt;</span><span class="css"></span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="id">#selectable</span> <span
															class="class">.ui-selecting</span> <span class="rules">{</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>    <span class="rule"><span
															class="attribute">background</span>:<span class="value"> <span
																class="hexcolor">#ccc</span>;</span></span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="rule">}</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="id">#selectable</span> <span
															class="class">.ui-selected</span> <span class="rules">{</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>    <span class="rule"><span
															class="attribute">background</span>:<span class="value"> <span
																class="hexcolor">#999</span>;</span></span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="rule">}</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;/<span
															class="title">style</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">ul</span> <span
															class="attribute">id</span>=<span class="value">"selectable"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">li</span>&gt;</span>Item 1<span class="tag">&lt;/<span
															class="title">li</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">li</span>&gt;</span>Item 2<span class="tag">&lt;/<span
															class="title">li</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">li</span>&gt;</span>Item 3<span class="tag">&lt;/<span
															class="title">li</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">li</span>&gt;</span>Item 4<span class="tag">&lt;/<span
															class="title">li</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">li</span>&gt;</span>Item 5<span class="tag">&lt;/<span
															class="title">li</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">script</span>&gt;</span><span
															class="javascript"></span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">"#selectable"</span> ).selectable();</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">html</span>&gt;</span>
													</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<h4>Demo:</h4>
					<div class="demo code-demo" data-height="150"></div>
				</div>
			</section>
		</div>
	</article>

</body>
</html>
